<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>BOX-ANIMATE||css3动画</title>
<link href="" rel="stylesheet">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/box-animate-v1.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
    <div class="container">
    	<div class="col-md-6">
    		<h3 class="text-info">css3动画demo1 closed-border类</h3>
    		<div class="box closed-border">
    			<div class="box-block">
    				<div class="box-img">
    					<img src="img/pro_1.jpg">
    				</div>
    				<div class="box-caption">
    					<h3 class="box-header">动画demo标题</h3>
    					<p class="box-body">此处为描述性语言</p>
    				</div>
    				<a class="box-link" href="#"></a>
    			</div>
    		</div>
    	</div>
    	<div class="col-md-6">
    		<h3 class="text-info">css3动画demo2 forked-border类</h3>
    		<div class="box forked-border">
    			<div class="box-block">
    				<div class="box-img">
    					<img src="img/pro_1.jpg">
    				</div>
    				<div class="box-caption">
    					<h3 class="box-header">动画demo标题</h3>
    					<p class="box-body">此处为描述性语言</p>
    				</div>
    				<a class="box-link" href="#"></a>
    			</div>
    		</div>
    	</div>
    	<div class="col-md-6">
    		<h3 class="text-info">css3翻转动画 X轴 flipX类</h3>
    		<div class="box flipX">
    			<div class="box-block">
    				<div class="box-img">
    					<img src="img/pro_1.jpg">
    				</div>
    				<div class="box-caption">
    					<h3 class="box-header">动画demo标题</h3>
    					<p class="box-body">此处为描述性语言</p>
    				</div>
    				<a class="box-link" href="#"></a>
    			</div>
    		</div>
    	</div>
    	<div class="col-md-6">
    		<h3 class="text-info">css3翻转动画 Y轴 flipY类</h3>
    		<div class="box flipY">
    			<div class="box-block">
    				<div class="box-img">
    					<img src="img/pro_1.jpg">
    				</div>
    				<div class="box-caption">
    					<h3 class="box-header">动画demo标题</h3>
    					<p class="box-body">此处为描述性语言</p>
    				</div>
    				<a class="box-link" href="#"></a>
    			</div>
    		</div>
    	</div>
    	<div class="col-md-6">
    		<h3 class="text-info">css3下滑动画 slide类</h3>
    		<div class="box slide">
    			<div class="box-block">
    				<div class="box-img">
    					<img src="img/pro_1.jpg">
    				</div>
    				<div class="box-caption">
    					<h3 class="box-header">动画demo标题</h3>
    					<p class="box-body">此处为描述性语言</p>
    				</div>
    				<a class="box-link" href="#"></a>
    			</div>
    		</div>
    	</div>
    	<div class="col-md-6">
    		<h3 class="text-info">css3下滑动画 slideAll类</h3>
    		<div class="box slideAll">
    			<div class="box-block">
    				<div class="box-img">
    					<img src="img/pro_1.jpg">
    				</div>
    				<div class="box-caption">
    					<h3 class="box-header">动画demo标题</h3>
    					<p class="box-body">此处为描述性语言</p>
    				</div>
    				<a class="box-link" href="#"></a>
    			</div>
    		</div>
    	</div>
    </div>
<nav class="navbar navbar-default navbar-fixed-bottom" style="line-height: 50px;">
  <div class="container">
  <p class="text-center">
  	 	以上CSS3动画均借鉴于<a href="http://www.html5tricks.com/" title="">HTML5教程分享</a>的实例,加上自己的一些想法写成，感谢原作者！
  	 	</p>
  </div>
</nav>
</body>
</html>